<template>
    <div class="right">
        <div class="topBox">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="['#0b254f', '#0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">本年每月问题统计</dv-border-box-12>
                    </div>
                    <!-- 玫瑰饼状图 -->
                    <div id="pieChart" style="width: 100%; height: 190px;"></div>
                </dv-border-box-4>
            </BorderBox2>
        </div>
        <div class="centerBox">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="['#0b254f', '#0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">问题来源分布</dv-border-box-12>
                    </div>
                    <div style="display: flex;">
                        <div class="leftPart">
                            <!-- 雷达图 -->
                            <div id="radarChart"
                                style="width: 100%; height: 230px;transform: scale(0.8) translateY( -15%);">
                            </div>
                        </div>
                        <div class="rightPart">
                            <div style="display: flex;margin-bottom: 50px;">
                                <div class="one">
                                    <img src="../../../public//Supervision/fabu.png" alt="">
                                    <p style="display: flex;flex-direction: column;gap: 10px;">
                                        <span>发布总量</span>
                                        <span 
                                        style="font-size: 23px;
                                        color: #02a7f0;
                                        font-weight: 900;
                                        "
                                        >1234567</span>
                                    </p>
                                </div>
                                <div class="two">
                                    <img src="../../../public//Supervision/question.png" alt="">
                                    <p style="display: flex;flex-direction: column;gap: 10px;">
                                        <span>问题总量</span>
                                        <span style="font-size: 23px;
                                        color: #f59a23;
                                        font-weight: 900;
                                        "
                                        >1234567</span>
                                    </p>
                                </div>
                            </div>
                           <div style="display: flex;gap: 12px;">
                            <div class="item">
                               <p style="background-color: #02a7f0;"></p>
                               <span>发布数量</span>
                            </div>
                            <div class="item">
                               <p style="background-color: #f59a23;"></p>
                               <span>一般错误</span>
                            </div>
                            <div class="item">
                               <p style="background-color: #a30014;"></p>
                               <span>严重错误</span>
                            </div>
                           </div>
                        </div>
                    </div>

                </dv-border-box-4>
            </BorderBox2>
        </div>
        <div class="bottomBox">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="[' #0b254f', ' #0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">政务新媒体排行</dv-border-box-12>
                    </div>
                    <!-- 表格 -->
                    <table cellspacing="0" cellpadding="0" width="90%">
                        <thead style="background-color: #0b254f;color: white;">
                            <tr>
                                <th>排名</th>
                                <th>名称</th>
                                <th>类型</th>
                                <th>更新数</th>
                                <th>点赞数</th>
                                <th>最后更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center">
                                <td>
                                    <span>1</span>
                                </td>
                                <td>新媒体1</td>
                                <td>微博</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>

                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>
                                    <span>2</span>
                                </td>
                                <td>新媒体2</td>
                                <td>微信</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>

                            </tr>
                            <tr align="center">
                                <td>
                                    <span>3</span>
                                </td>
                                <td>新媒体3</td>
                                <td>抖音</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">

                                <td>4</td>
                                <td>新媒体4</td>
                                <td>微信</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                            <tr align="center">
                                <td>5</td>
                                <td>新媒体5</td>
                                <td>微博</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                        </tbody>
                    </table>
                </dv-border-box-4>
            </BorderBox2>
        </div>

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
    var pieChartDom = document.getElementById('pieChart');
    var myChart = echarts.init(pieChartDom);
    var pieOption;
    pieOption = {
        legend: {
            right: '15%',          // 图例居左
            top: 'center',        // 垂直居中
            orient: 'vertical',   // 垂直排列
            textStyle: {
                color: '#ffffff'   // 白色文字，适配深色背景
            }
        },
        toolbox: {
            show: false           // 隐藏工具盒节省空间
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: ['20%', '80%'],
                center: ['35%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 40, name: '媒体名称A' },
                    { value: 28, name: '媒体名称B' },
                    { value: 32, name: '媒体名称C' },
                    { value: 30, name: '媒体名称D' },
                    { value: 38, name: '媒体名称E' },
                    { value: 26, name: '媒体名称F' },
                    { value: 22, name: '媒体名称G' }
                ]
            }
        ]
    };
    pieOption && myChart.setOption(pieOption);
    var radarChartDom = document.getElementById('radarChart');
    var radarChart = echarts.init(radarChartDom);
    var radarOption;
    radarOption = {

        radar: {
            indicator: [
                { name: '微信', max: 100 },
                { name: '微博', max: 100 },
                { name: '其他', max: 100 },
                { name: '抖音', max: 100 }
            ],
            shape: 'polygon', // 菱形雷达图
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.8)'
                }
            },
            axisLabel: {
                color: '#ffffff'
            },
            splitArea: {
                show: false
            }
        },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        value: [80, 60, 40, 70],
                        itemStyle: {
                            color: '#00bcd4' // 发布数量-青色
                        },
                        areaStyle: {
                            color: 'rgba(0, 188, 212, 0.5)'
                        }
                    },
                    {
                        value: [60, 40, 30, 50],
                        itemStyle: {
                            color: '#ffc107' // 一般错误-黄色
                        },
                        areaStyle: {
                            color: 'rgba(255, 193, 7, 0.5)'
                        }
                    },
                    {
                        value: [40, 30, 20, 30],
                        itemStyle: {
                            color: '#f44336' // 严重错误-红色
                        },
                        areaStyle: {
                            color: 'rgba(244, 67, 54, 0.5)'
                        }
                    }
                ],
                symbol: 'circle',
                symbolSize: 6
            }
        ]
    };
    radarOption && radarChart.setOption(radarOption);
});

</script>

<style lang="scss" scoped>
.right {
    padding: 10px;
    width: 100%;

    .topBox {
        width: 604px;
        margin-bottom: 5px;
        height: 310px;
    }

    .centerBox {
        width: 604px;
        height: 300px;
        margin-bottom: 5px;
        .leftPart {
            width: 49%;
            height: 100%;
        }
        .rightPart {
            width:51%;
            height: 100%;
            transform: translate(-15%, 10%);

            img {
                width: 55px;
                height: 55px;
            }
            .one, .two {
                margin-bottom: 5px;
                display: flex;
                align-items: center;

            }
            .item {
                height: 20px;
                display: flex;
                align-items: center;
                p{
                    width: 30px;
                    height: 20px;
                }
            }
        }

    }

    .bottomBox {
        width: 604px;
        height: 310px;

        table {
            transform: translate(3%, -5%);

            tr {
                height: 34px;
            }

            td span {
                padding: 3px 10px;
                background-color: #183a90;
            }
        }
    }


}
</style>